<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="X-UA-COMPATIBLE" content="IE-edge,chrome=1"><!--告诉ie使用新的渲染方式，防止低版本的ie不能使用css3-->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700" rel="stylesheet" type="text/css"/>
    <link href="css/css.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <div class="nav">
        <input type="radio" name="radio-set" checked id="nav1">
        <a href="#panel1">导航1</a>
        <input type="radio" name="radio-set" id="nav2">
        <a href="#panel2">导航2</a>
        <input type="radio" name="radio-set" id="nav3">
        <a href="#panel3">导航3</a>
        <input type="radio" name="radio-set" id="nav4">
        <a href="#panel4">导航4</a>
        <input type="radio" name="radio-set" id="nav5">
        <a href="#panel5">导航5</a>
        <div class="scroll">
            <section class="panel" id="panel1">
                <div class="icon" data-icon="a"></div>
                <h1>Serendipity1</h1>
                <p>you are my sunshine</p>
            </section>
            <section class="panel panelColor" id="panel2">
                <div class="icon" data-icon="b"></div>
                <h1>Serendipity2</h1>
                <p>you are my sunshine</p>
            </section>
            <section class="panel" id="panel3">
                <div class="icon" data-icon="c"></div>
                <h1>Serendipity3</h1>
                <p>you are my sunshine</p>
            </section>
            <section class="panel panelColor" id="panel4">
                <div class="icon" data-icon="d"></div>
                <h1>Serendipity4</h1>
                <p>you are my sunshine</p>
            </section>
            <section class="panel" id="panel5">
                <div class="icon" data-icon="e"></div>
                <h1>Serendipity5</h1>
                <p>you are my sunshine</p>
            </section>

        </div>
    </div>
</div>
<script>
    window.onload= function () {
        var scroll=document.getElementsByClassName("scroll")[0];//ie不兼容，换成id会成功
        var panel=document.getElementsByClassName("panel");//ie不兼容，换成id会成功

        var clientH=window.innerHeight;
        scroll.style.height=clientH+"px";
        for(var i=0;i<panel.length;i++){
            panel[i].style.height=clientH+"px";
        }
        /*下面是关于鼠标滚动*/
        var inputC=document.getElementsByTagName("input");
        var wheel= function (event) {
            var delta=0;
            if(!event)//for ie
                event=window.event;
            if(event.wheelDelta){//ie,opera
                delta=event.wheelDelta/120;
            }else if(event.detail){
                delta=-event.detail/3;
            }
            if(delta){
                handle(delta,inputC);
            }
            if(event.preventDefault)
                event.preventDefault();
            event.returnValue=false;
        };
        if(window.addEventListener){
            window.addEventListener('DOMMouseScroll',wheel,false);
        }
        window.onmousewheel=wheel;
    };
    function handle(delta,arr) {
        var num;
        for(var i=0;i<arr.length;i++){//得到当前checked元素的下标
            if(arr[i].checked){
                num=i;
            }
        }
        if(delta>0 && num>0){//向上滚动
            num--;
            arr[num].checked=true;
        }else if(delta<0 && num<4){//向下滚动
            num++;
            arr[num].checked=true;
        }
    }
</script>
</body>
</html>
